<!--1 19:09:14-->
<!--<template>-->
<!--  <div>-->
<!--    <div>-->
<!--     <table>-->
<!--       <tr>111</tr>-->
<!--       <tr v-for="item in list">-->
<!--         <td>{{item.rid}}</td>-->
<!--         <td>{{item.rname}}</td>-->
<!--         <td> <button @click="del(item.rid)">删除</button>/-->
<!--           <button @click="update(item)">修改</button></td>-->
<!--       </tr>-->
<!--     </table>-->
<!--      <div>-->
<!--        <form>-->
<!--          权限名: <input v-model="texture.rname"/><br>-->
<!--          <button type="submit" @click="add()">提交</button>-->
<!--        </form>-->
<!--      </div>-->
<!--      <div>-->
<!--        <form>-->
<!--          id:<input  v-model="texture1.rid" /><br>-->
<!--          权限名: <input  v-model="texture1.rname"/><br>-->
<!--          <button type="submit" @click="upd()">提交</button>-->
<!--        </form>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import axios from 'axios'-->

<!--export default {-->
<!--  name: 'Role',-->
<!--  data () {-->
<!--    return {-->
<!--      list: [],-->
<!--      texture1:{rid:"",rname:""},-->
<!--      texture:{rname:""},-->
<!--    }-->
<!--  },-->

<!--  created() {-->
<!--    this.$http.post('/role/select').then(data=>{-->
<!--      this.list = data;-->
<!--    })-->
<!--  },-->
<!--  methods:{-->
<!--    del(rid){-->
<!--     // alert(rid);-->
<!--      // var params = new URLSearchParams();-->
<!--      // params.append('id', '70');-->
<!--      // var f = new FormData()-->
<!--      // f.append('id', id)-->
<!--      this.texture.rid=rid;-->
<!--      this.$http.post("/role/delete",this.texture);-->
<!--      //$.post("http://localhost:8080/texture/select");-->
<!--      window.location.reload();-->
<!--    },-->
<!--    add(){-->
<!--      //alert("11");-->
<!--      // var f = new FormData()-->
<!--      // f.append('name',this.texture.name)-->
<!--      this.$http.post("/role/insert", this.texture).then(add=>{-->
<!--        //alert(add);-->
<!--        if(add>0){-->
<!--          alert("添加成功");-->
<!--          window.location.reload();-->
<!--        }else{-->
<!--          alert("添加失败")-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    update(item){-->
<!--      this.texture1.rid=item.rid;-->
<!--      this.texture1.rname=item.rname-->
<!--      // this.texture.name=item.name;-->
<!--    },-->
<!--    upd(){-->
<!--      // alert("33");-->
<!--      // alert(item);-->
<!--      // this.texture.id=item.id;-->
<!--      // this.texture.name=item.name;-->
<!--      this.$http.post("/role/update",this.texture1).then(add=>{-->
<!--        //alert(add);-->
<!--        if(add>0){-->
<!--          alert("修改成功");-->
<!--          window.location.reload();-->
<!--        }else{-->
<!--          alert("修改失败")-->
<!--        }-->
<!--      });-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->

<!--<template>-->

<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'BookTest'-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->
<!--<template>-->

<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'TestADU'-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->

<template>
  <div>
    <!--    <img :src="src1">-->
    <div style="text-align:left">
      <!-- <el-input v-model="tableDataName" size="small" placeholder="请输入姓名" style="width:240px"></el-input>
      <el-button type="primary" size="small" @click="searchUser">搜索</el-button> -->
      <!-- <el-button type="primary" size="small" @click="openData">展示数据</el-button> -->
      <el-button type="success" size="small" @click="addRow(role)">新增</el-button>
      <!-- <el-button type="success" size="small" @click="handleAdd()">新增</el-button> -->
      <el-button type="primary" size="small" @click="removerole()">批量删除</el-button>
    </div>
    <div>
      <el-table :data="role.slice((currentPage-1)*pageSize,currentPage*pageSize)" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
        <el-table-column type="selection" width="60">
        </el-table-column>
        <el-table-column type="index" width="30">
        </el-table-column>
        <el-table-column prop="rid"  label="编号" width="110" sortable>
        </el-table-column>
        <el-table-column prop="rname"  label="角色" width="110" sortable>
        </el-table-column>
        <el-table-column prop="state"  label="状态" width="100" sortable>
<!--          <template   slot-scope="scope">-->
<!--            <span v-if="scope.row.state===1" style="color:hotpink">已发行</span>-->
<!--            <span v-if="scope.row.state===0">未发行</span>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column prop="annotation"  label="权限描述" width="150" sortable>
        </el-table-column>
        <el-table-column prop="role"  label="权限" width="150" sortable>

        </el-table-column>
        <el-table-column prop="priviledge"  label="总权" width="150" sortable>
        </el-table-column>
        <el-table-column label="操作" width="390">
          <template slot-scope="scope">
            <!-- <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">新增</el-button> -->
            <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row.rid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination align='center'
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[1,5,10,20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="role.length">
      </el-pagination>
    </div>
    <!--新增/编辑界面-->
    <el-dialog :title="titleMap[dialogStatus]" :visible.sync="FormVisible" :close-on-click-modal="false" class="edit-form"
               :before-close="handleClose">
      <el-form :model="Form" label-width="80px" :rules="editFormRules" ref="Form">
        <el-form-item label="编号" prop="rid" hidden>
          <el-input v-model="Form.rid" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="rname">
          <el-input v-model="Form.rname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限详情" prop="annotation">
          <el-input v-model="Form.annotation" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="role">
          <el-input v-model="Form.role" auto-complete="off"></el-input>
        </el-form-item>


        <el-form-item label="总权" prop="priviledge">
<!--        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
<!--        <div style="margin: 15px 0;"></div>-->
<!--        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">-->
<!--          <el-checkbox v-for="city in cities" v-model="Form.priviledge" :label="city" :key="city">{{city}}</el-checkbox>-->
<!--        </el-checkbox-group>-->
                    <el-input v-model="Form.priviledge" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态" >
          <!--          <el-input type="select" v-model="Form.state"></el-input>-->
          <el-select v-model="Form.state" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleCancel('Form')">取消</el-button>
        <el-button v-if="addBtnshow" type="primary" @click.native="confirmAdd('Form')">确定</el-button>
        <el-button v-if="editBtnshow" type="primary" @click.native="confirmEdit('Form')">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
var _index;
const cityOptions = ['insert', 'delete', 'update', 'select'];
export default {
  name: 'RoleManger',
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true,

      addForm: {
        image: ''
      },
      rules: {
        image: [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ]
      },

      src1: require('../../assets/微信图片_20210731215732.jpg'),

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },

      options: [{
        value: '1',
        label: '启用'
      }, {
        value: '0',
        label: '禁用'
      }],


      currentPage:1,
      pageSize:5,
      titleMap: {
        addEquipment:'新增',
        editEquipment: "编辑"
      },
      //新增和编辑弹框标题
      // dialogStatus: "",
      Form: {
        rid: '',
        rname: '',
        priviledge:'',
        annotation:'',
        role:'',
        state:''
      },

      role:[
      ],

      editFormRules:{
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        reserve: [
          { required: true, message: '请输入商品库存', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入商品描述', trigger: 'blur' }
        ],
      },
      FormVisible: false,
      currentRow:[],
      ids:[],
      listLoading:'',
      addBtnshow:false,
      editBtnshow:false,
      editLoading:'',
      dialogStatus: '',
      selected:[],
      editid:'',
      searchForm:[]
    }
  },
  created() {
    this.$http.post('role/select').then(data=>{
      console.log(data);
      this.role = data;
    });
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },

    handleChange(file, fileList) {
      this.addForm.image = URL.createObjectURL(file.raw)
      // var files = this.addForm.image
      // files.push(this.addForm.image)
    },
    beforeupload(file) {
      return true
    },
    submitForms(addForm) { // 新增表单提交
      this.axios({
        method: 'post',
        url: 'url',
        headers: { Authorization: window.sessionStorage.getItem('token') },
        data: { }
      })
        .then(res => {
          this.$refs[addForm].validate((valid) => {
            if (valid) {
              this.$refs.upload.submit()
              // 不可缺少
            } else {
              console.log('error submit!!')
              return false
            }
          })
        })
        .catch(function(error) {
          console.log(error)
        })
    },

    selsChange: function (val) {  //点击选中
      console.log(val);
      this.selected = val;
    },
    // 点击新增
    addRow (role, event) {
      this.FormVisible = true;
      this.Form = {
        rid: 0,
        name: '',
        price: 0,
        date: '',
      };

      this.dialogStatus = "addEquipment"
      this.addBtnshow = true
      this.editBtnshow = false

    },
    // 点击确定（新增）
    confirmAdd () {

      // this.book.push({
      //   name: this.Form.name,
      //   price: this.Form.price,
      //   reserve: this.Form.reserve,
      //   data: this.Form.data,
      //   desc: this.Form.desc
      // })

      this.$http.post("/role/insert", this.Form).then(add => {
        //alert(add);
        if (add > 0) {
          alert("添加成功");
          window.location.reload();
        } else {
          alert("添加失败")
        }
      })
      this.FormVisible = false;
    },
    //点击编辑
    handleEdit: function (index, row) {
      this.FormVisible = true;
      this.Form = Object.assign({}, row); //这句是关键！！！
      _index = index;
      console.log(index);
      console.log(_index);

      this.dialogStatus = "editEquipment"
      this.addBtnshow = false
      this.editBtnshow = true
    },
    // 点击确定（编辑）
    confirmEdit () {
      this.$http.post("/role/update", this.Form).then(add => {
        if (add > 0) {
          alert("修改成功");
          window.location.reload();
        } else {
          alert("修改失败")
        }
      });

    },
    //点击关闭dialog
    handleClose (done) {
      //  done();
      //  location.reload();
      this.FormVisible = false;
    },
    //点击取消
    handleCancel (formName) {
      this.FormVisible = false;
    },
    // 删除
    handleDelete (index, rows) {

      // console.log(index, row);
      this.Form.rid = rows
      // alert(this.Form.id);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //alert(this.Form.rid)
        this.$http.post("/role/delete", this.Form).then(add => {
          if (add > 0) {
            type: 'success';
            message: '删除成功!';
            window.location.reload();
          } else {
            alert("修改失败")
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    removerole () {
      this.$confirm('此操作将永久删除 ' + this.selected.length + ' 条数据, 是否继续?', '提示', {type: 'warning'})
        .then(() => {
          console.log(this.selected);
          var ids = [];
          //提取选中项的id
          $.each(this.selected, (i, role) => {
            ids.push(role.rid);
          });
          // 向请求服务端删除
          //  var resource = this.$resource(this.url);
          this.$http.post("/role/delete", {ids: ids.join(",")})
            .then((response) => {
              this.$message.success('删除了' + this.selected.length + '条数据!');
              this.getrole();
            })
            .catch((response) => {
              this.$message.error('删除失败!');
            });
        })
        .catch(() => {
          this.$message('已取消操作!');
        });
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    stateFormat (row, column, cellValue) {
      // console.log(row , column , cellValue)
      if (!cellValue) return "";
      if (cellValue.length > 40) {
        //最长固定显示4个字符
        return cellValue.slice(0, 40) + "...";
      }
      return cellValue;
    },
    clickContent: function (row, column, cell, event) {
      clickContent(row, column, cell, event)
      {
        if (column.label === '数据内容') {  // 只有点击数据内容列时才会展开
          row.flag = !row.flag  // 这个参数是当时将数据存储到表格中时特意加上控制表格的展开和省略的
        }
      }
    }

  },
}
</script>
<style>

</style>
